<template>
  <div>
    <div class="box">
      <div class="box-top">
        <div class="box-top-left">
          <img src="/video/9.png" alt="" />
        </div>
        <div class="box-top-center">
          <h5>侠肝义胆沈剑心</h5>
          <p>
            <span class="time">3&nbsp;天前</span>&nbsp;·&nbsp;<span class="text"
              >暗魔领主</span
            >
          </p>
        </div>
        <div class="box-top-right">:</div>
      </div>
      <div class="box-center">
        <video id="video" controls="" autoplay="" width="100%" height="100%">
          <source src="/video/1.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="box-center2">
          <h4>这个应该是机制最难打的BOSS了吧</h4>
        <p>官方看看在机器人，打几天了过不去</p>
      </div>

      <div class="box-bottom">
           <div>
               <img src="/video/10.png" alt="">
           </div>
           <div><img src="/video/11.png" alt="">
           <span>3</span>
           </div>
           <div><img src="/video/12.png" alt="">
           <span>3</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  width: 3.432rem;
  /* height: 3.5025rem; */
  margin: auto;
  background-color: #fff;
  margin-top: 0.05rem;
}
.box-top {
  width: 3.432rem;
  height: 0.392rem;
  /* background-color: #fff; */
  display: flex;
  justify-content: space-between;
}
.box-top-left {
  width: 0.32rem;
  height: 0.392rem;
  /* background-color: rgb(231, 147, 147); */
  display: flex;
}
.box-top-left img {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  margin-top: 0.036rem;
}
.box-top-center {
  width: 2.852rem;
  height: 0.392rem;
  /* background-color: rgb(181, 223, 162); */
  padding-left: 0.1rem;
}
.box-top-center h5 {
  color: #1d2127;
  font-size: 0.14rem;
}
.box-top-center p {
  display: flex;
  color: #b9bec1;
  font-size: 0.12rem;
}
.box-top-center .time {
  color: #b9bec1;
  font-size: 0.12rem;
}
.box-top-center .text {
  color: #14b9c8;
  font-size: 0.12rem;
}
.box-top-right {
  width: 0.18rem;
  height: 0.392rem;
  font-size: 0.16rem;
  color: #999;
  line-height: 0.392rem;
  text-align: center;
  font-weight: 700;
  /* background-color: rgb(180, 158, 216); */
}
.box-center {
  width: 3.432rem;
  height: 1.9305rem;
}
.box-center video {
  border-radius: 0.1rem;
}
.box-center2 p,
h4 {
  color: #1d2127;
  font-size: 0.16rem;
  margin-top: 0.06rem;
}
.box-bottom{
    width: 3.432rem;
    height: 0.44rem;
    display: flex;
    font-size: 0.14rem;
    justify-content: space-between;
    text-align: center;
    /* line-height: 0.44rem; */
    color: #868C92;
}
.box-bottom div{
    width: 1.1174rem;
}
.box-bottom img{
    width: 0.24rem;
    height: 0.24rem;
    margin-top: 0.12rem;
}
.box-bottom div span{
    margin-left:0.5rem;
    display: block;
    /* padding-top: 0.2rem; */
    margin-top: -0.25rem;
}

</style>